target 在英文中，是目標的意思，在網頁上是指目前所在元素的位置，舉個例子來說，有一個 ul, li 的清單，當中有一個 a 連結，命名一個 link 名稱，程式碼如下：

<ul>
  <li>
    <a href="#" class="link">
      這是一個連結
    </a>
  </li>
</ul>

先前有紀錄 event 事件中，在 window 裡面會有許多物件事件，其中有兩個會很常使用，一個是 target，另一個是 nodeName。

target

在 JS 增加一個 addEventListener 語法，來找下 e 裡面的事件，就可以看到 target，如下：

var link = document.querySelector(".box");
link.addEventListener(
  "click",
  function (e) {
    console.log(e);
  },
  false
);

這時候點擊 a 連結，就會看到下方這一整排資訊，

MouseEvent {isTrusted: true, screenX: 135, screenY: 565, clientX: 135, clientY: 30, …}
isTrusted: true
screenX: 135
screenY: 565
clientX: 135
clientY: 30
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 135
pageY: 30
x: 135
y: 30
offsetX: 87
offsetY: 10
movementX: 0
movementY: 0
fromElement: null
toElement: a.link
layerX: 135
layerY: 30
view: Window {parent: global, opener: null, top: global, length: 0, frames: Window, …}
detail: 1
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
which: 1
type: "click"
target: a.link //就在這裡
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: true
timeStamp: 3037.2799999895506
srcElement: a.link
returnValue: true
cancelBubble: false
path: (7) [a.link, li, ul, body, html, document, Window]
__proto__: MouseEvent

之後接觸到 this 的時候，就會很常使用了。

nodeName

nodeName 上網 google 是找不到這個名詞的，但有發現 Name 的開頭是大寫，代表應該是兩個英文名詞串起來的，果不其然，找一下字典

• node 節點 (植物相關叫做莖結)
• name 名字

在網頁上有節點名稱的意思，代表 DOM 元素點擊到的節點。

這時候在 console.log 內，繼續輸入以下程式碼:

console.log(e.target.nodeName);

就會找到 nodeName，會發現會是用英文大寫呈現，所以如果會使用到的話，也要打成大寫，才能順利執行。

codepen: https://codepen.io/hnzxewqw/pen/jOPBGpW